import React, { FC, useState } from 'react'
import classNames from 'classnames'
import Transition from '../transition/transition'
import Icon from '../icon'

type alterType = "success" | "default" | "danger" | "warning"
export interface alertProps {
    title: string, //标题
    description?: string//描述
    type?: alterType //类型 四种可选 针对四种不同的场景
    onClose?: () => void //	关闭alert时触发的事件
    closable?: boolean //是否显示关闭图标
}

const Alert: FC<alertProps> = (props) => {
    //    props
    const { title, description, type, onClose, closable } = props
    const classes = classNames('viking-alert', "viking-alert-" + type)
    const titleClass = classNames('viking-alert-title', { 'bold-title': description })
    // state
    const [isShow, setIsShow] = useState(false)
    // methods 
    const handleClose = () => {
        if (onClose) {
            onClose()
        }
        setIsShow(true)
    }
    return (
        <Transition timeout={300} animation="zoom-in-top" in={!isShow}>
            <div className={classes}>
                <span className={titleClass}>
                    {title}
                </span>
                {description && <p className='viking-alert-desc'>{description}</p>}
                {closable && <span className='viking-alert-close' onClick={handleClose}>
                    <Icon icon='times'></Icon>
                </span>}
            </div>
        </Transition >
    )
}
Alert.defaultProps = {
    type: 'default',
    closable: true,
};
export default Alert